<script setup lang="ts">
import dayjs from 'dayjs'
import { useUserInfoStore } from '@/store/userInfo'
import { fetchProjectNodeListAPI } from '@/apis/fetchProjectNodeList'

const userInfoStore = useUserInfoStore()
const projectId = ref('')
const loading = ref(true)
const nodeList = ref<Array<ProjectNode>>([])

onLoad(async (options) => {
  if (options && options.project_id) {
    projectId.value = options.project_id
    loading.value = true
    try {
      const res = await fetchProjectNodeListAPI({ project_id: projectId.value }, userInfoStore.userInfo!.token!)
      loading.value = false
      if ((res.data as any).code === 1) {
        nodeList.value = (res.data as any).data as ProjectNode[]

        setTimeout(() => {
          if (options.node_id) {
            uni.pageScrollTo({
              selector: `#${options.node_id}`,
              duration: 300,
            })
          }
        }, 500)
      }
    }
    catch (err) {
      loading.value = false
      uni.showToast({ title: '获取数据失败，请稍后重试' })
    }
  }
})
</script>

<template>
  <Spacer height="30" />
  <uv-list v-if="nodeList.length > 0" :custom-style="{ background: '#F8F8F8' }">
    <uv-list-item
      v-for="node in nodeList" :id="node.id" :key="node.id"
      :custom-style="{ background: 'none', borderRadius: '20rpx', marginBottom: '30rpx' }"
    >
      <view class="flex flex-col p-30rpx bg-white rounded-20rpx">
        <view class="flex justify-between items-center">
          <view class="text-30rpx leading-30rpx text-secondary font-bold">
            {{ node.node_name }}
          </view>
          <view class="text-24rpx leading-24rpx text-tertiary">
            {{ dayjs.unix(node.create_time!).format('YYYY/MM/DD HH:mm') }}
          </view>
        </view>
        <Spacer height="30" />
        <Divider />
        <Spacer height="30" />
        <view class="text-28rpx leading-40rpx text-secondary">
          {{ node.desc || '暂无数据' }}
        </view>
        <Spacer v-if="node.images" height="30" />
        <PictureGrid
          v-if="node.images"
          mode="display"
          :width="630"
          :cols="4"
          :pictures="node.images?.split(',') || []"
        />
        <Spacer v-if="node.video_image" height="30" />
        <VideoGrid
          v-if="node.video_image"
          mode="display"
          :width="630" :cols="4"
          :videos="node.video?.split(',') || []"
          :thumbs="node.video_image?.split(',') || []"
        />
      </view>
    </uv-list-item>
  </uv-list>
  <PageDefault v-else />
  <Spacer height="120" />
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'projectNodes'
style:
  navigationBarTitleText: '项目节点'
</route>
